<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <meta name="description" content="描述">
  <meta name="keywords" content="关键词">
  <link rel="icon" href="">
  <link rel="shortcut icon" href="">
  <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
  <title>商务合作</title>
  <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <link href="/web/lib/cropper/cropper.min.css" rel="stylesheet">
  <link href="/web/lib/cropper/sitelogo.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <link rel="stylesheet" href="/web/public/css/public.css">
  <link rel="stylesheet" href="/web/public/css/header.css">
  <link rel="stylesheet" href="/web/public/css/footer.css">
  <link rel="stylesheet" href="/web/public/css/cooperation.css">
  <script src="/web/lib/jquery-1.12.4.min.js"></script>
  <script src="/web/public/public.js"></script>
  <script src="/web/lib/jquery.pagination.js"></script>
  <!--    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>-->
  <!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>-->
  <script src="/web/lib/cropper/cropper.js"></script>
  <script src="/web/lib/cropper/sitelogo.js"></script>
</head>

<body>
  <div class="container">
    <!--这里引入header-->
    <include file="/web/html/header/header.htm" page-type="1"></include>
    <div class="banner">
      <img class="banner-img" src="/web/img/img-about.png" alt="">
      <img class="text" src="/web/img/text-cooperation.png" alt="">
    </div>
    <div id="main">
      <div class="tab-wrap">
        <div class="tab-item">供应商信息</div>
      </div>
      <div class="form-wrap">
        <div class="form-item supplier">
          <div class="keyword">供应商名称：</div>
          <div class="value must-input">
            <input type="text" placeholder="请输入供应商名称" data-error-sign="供应商名称应为1-200字">
          </div>
        </div>
        <div class="form-item industry">
          <div class="keyword">所属行业：</div>
          <div class="value must-input">
            <select class="selectpicker" data-error-sign="请选择所属行业">
            </select>
          </div>
        </div>
        <div class="form-item intention">
          <div class="keyword">合作意向：</div>
          <div class="value must-input">
            <input type="text" placeholder="请填写" data-error-sign="合作意向应为1-200字">
          </div>
        </div>
        <div class="form-item contact">
          <div class="keyword">联系人：</div>
          <div class="value must-input">
            <input type="text" placeholder="联系人" data-error-sign="联系人应为1-200字">
          </div>
        </div>
        <div class="form-item mobile">
          <div class="keyword">手机/微信：</div>
          <div class="value must-input">
            <input type="text" placeholder="手机/微信" data-error-sign="手机或微信应为1-200字">
          </div>
        </div>
        <div class="form-item worker">
          <div class="keyword">职位：</div>
          <div class="value">
            <input type="text" placeholder="职位" data-error-sign="职位应为1-200字">
          </div>
        </div>
        <div class="form-item picture">
          <div class="keyword">提交人名片：</div>
          <div class="value">
            <input type="file" style="display: none;">
            <div class="img-wrap">
              <img src="/web/img/default-card.jpg" alt="图片">
            </div>
          </div>
        </div>
      </div>
      <div class="btn save">提交</div>
    </div>
    <include file="/web/html/footer/footer.htm"></include>
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
      tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

          <form class="avatar-form">
            <div class="modal-header">
              <button class="close" data-dismiss="modal" type="button">&times;</button>
              <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
            </div>
            <div class="modal-body">
              <div class="avatar-body">
                <div class="avatar-upload">
                  <input class="avatar-src" name="avatar_src" type="hidden">
                  <input class="avatar-data" name="avatar_data" type="hidden">
                  <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                  <button class="btn btn-danger" type="button" style="height: 35px;"
                    onclick="$('input[id=avatarInput]').click();">请选择图片
                  </button>
                  <span id="avatar-name"></span>
                  <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
                </div>
                <div class="row">
                  <div class="col-md-9">
                    <div class="avatar-wrapper"></div>
                  </div>
                  <div class="col-md-3">
                    <div class="avatar-preview preview-lg" id="imageHead"></div>

                  </div>
                </div>
                <div class="row avatar-btns">
                  <div class="col-md-4">
                    <div class="btn-group">
                      <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button"
                        title="Rotate -90 degrees"> 向左旋转
                      </button>
                    </div>
                    <div class="btn-group">
                      <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button"
                        title="Rotate 90 degrees"> 向右旋转
                      </button>
                    </div>
                  </div>
                  <div class="col-md-5" style="text-align: right;">
                    <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move"
                      type="button" title="移动">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                      </span>
                    </button>
                    <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1"
                      title="放大图片">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">

                      </span>
                    </button>
                    <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
                      data-option="-0.1" title="缩小图片">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">

                      </span>
                    </button>
                    <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214"></span>
                    </button>
                  </div>
                  <div class="col-md-3">
                    <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal">
                      保存修改
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="/web/lib/cropper/html2canvas.min.js"></script>
  <script src="/web/lib/axios.min.js"></script>

  <script>

    var $supplierInput = $('.form-item.supplier input'),
      $intentionInput = $('.form-item.intention input'),
      $contactInput = $('.form-item.contact input'),
      $mobileInput = $('.form-item.mobile input'),
      $industrySelect = $('.form-item.industry select'),
      $workerInput = $('.form-item.worker input'),
      $selectImgBtn = $('.form-item.picture .img-wrap'),
      $selectImgInput = $selectImgBtn.prev("input[type=file]"),
      imgCardUrl = '';

    $(function () {

      $selectImgBtn.click(function () {
        $selectImgInput.click();
      });
      $selectImgInput.change(function (e) {
        var file = this;
        var filemaxsize = 1024 * 5;//5M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if (!file.files[0].type.match(/image.*/)) {
          utils.showToast({
            title: '请选择正确的图片格式',
            type: 'warning'
          });
          return false;
        }
        if (Size > filemaxsize) {
          utils.showToast({
            title: '图片过大，请重新选择',
            type: 'warning'
          });
          return false;
        }
        var reader = new FileReader();
        if (file) {
          reader.readAsDataURL(file.files[0])
        }
        // 捕获 转换完毕
        reader.onload = function (e) {
          // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
          $('.form-item.picture .img-wrap img').prop('src', e.target.result);
          imagesAjax(e.target.result);
        }
      });

      function showErrorSign (el) {
        if (!el.next('.error-sign').length) {
          el.after('<span class="error-sign">' + el.data('errorSign') + '</span>');
        }
      }
      function hideErrorSign (el) {
        el.next('.error-sign').remove();
      }
      function testValEmpty (el, str) {
        var val = str || el.val().trim();
        if (!val || val.length > 200) {
          showErrorSign(el);
        } else {
          hideErrorSign(el);
        }
        return Boolean(val);
      }

      $.ajax({
        url: ports.getIndustryList,
        success: function (res) {
          console.log('查询行业列表', res);
          $.each(res.data, function (i, item) {
            $('.industry .selectpicker').append('<option value=' + item.constantName + '>' + item.constantName + '</option>');
          });
          $('.selectpicker').selectpicker({});
        }
      })
      $supplierInput.change(function () {
        testValEmpty($(this))
      });
      $intentionInput.change(function () {
        testValEmpty($(this))
      });
      $contactInput.change(function () {
        testValEmpty($(this))
      });
      $mobileInput.change(function () {
        testValEmpty($(this))
      });
      $workerInput.change(function () {
        var val = $(this).val().trim();
        if (val.length > 200) {
          showErrorSign($(this));
        } else {
          hideErrorSign($(this));
        }
      });

      $('.btn.save').click(function () {
        var pass = true;
        if (!testValEmpty($supplierInput)) {
          pass = false;
        }
        if (!testValEmpty($intentionInput)) {
          pass = false;
        }
        if (!testValEmpty($contactInput)) {
          pass = false;
        }
        if (!testValEmpty($mobileInput)) {
          pass = false;
        }
        if ($workerInput.val().trim().length > 200) {
          pass = false;
          showErrorSign($workerInput);
        }

        if (pass) {
          $.ajax({
            url: ports.commitCooperation,
            data: {
              "supplierName": $supplierInput.val().trim(),
              "industry": $industrySelect.val().trim(),
              "linkman": $contactInput.val().trim(),
              "position": $workerInput.val().trim(),
              "contactWay": $mobileInput.val().trim(),
              "intention": $intentionInput.val().trim(),
              picUrl: imgCardUrl
            },
            success: function (res) {
              console.log('提交商务合作信息', res);
              if (res.status == 200) {
                utils.showToast({
                  title: '提交成功',
                  type: 'success'
                })
                window.location.href = '/';
              }
            }
          })
        }
      })
    })
  </script>
  <script>
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function (e) {
      var filemaxsize = 1024 * 5;//5M
      var target = $(e.target);
      var Size = target[0].files[0].size / 1024;
      if (Size > filemaxsize) {
        alert('图片过大，请重新选择!');
        $(".avatar-wrapper").children().remove;
        return false;
      }
      if (!this.files[0].type.match(/image.*/)) {
        alert('请选择正确的图片!')
      } else {
        var filename = document.querySelector("#avatar-name");
        var texts = document.querySelector("#avatarInput").value;
        var teststr = texts; //你这里的路径写错了
        testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
        filename.innerHTML = testend;

        if (!$(".avatar-wrapper img.cropper-hidden").length) {
          var timer = setInterval(function () {
            if ($(".avatar-wrapper img.cropper-hidden").length) {
              clearInterval(timer);
              $(".avatar-wrapper img").cropper('destroy').cropper({ aspectRatio: 228 / 134, preview: '#imageHead', strict: false, });
            }
          }, 1)
        }

      }

    });

    $(".avatar-save").on("click", function () {
      var img_lg = document.getElementById('imageHead');
      // 截图小的显示框内的内容
      html2canvas(img_lg, {
        allowTaint: true,
        taintTest: false,
        onrendered: function (canvas) {
          canvas.id = "mycanvas";
          //生成base64图片数据
          var dataUrl = canvas.toDataURL("image/jpeg");
          $("*[data-target='#avatar-modal'] img").prop('src', dataUrl);
          imagesAjax(dataUrl)
        }
      });
    })

    function imagesAjax (src) {
      axios({
        method: 'post',
        url: ports.uploadCooperationPicture,
        data: utils.base64ToFormData(src),
        contentType: 'multipart/form-data',
        responseType: 'json',
        headers: {
          'Authorization': utils.cookieUtils.getCookie("token")
        }
      }).then(function (res) {
        console.log('上传图片', res);
        imgCardUrl = res.data.data;
      });
    }
  </script>
</body>

</html>